<template>
  <div class="box-bottom">
    <div class="nav">
      <div>预警趋势</div>
      <div class="time">
        <div class="border-r" :class="handleDataType == 'hour' ? 'timexz' : ''" @click="tabhandle('hour')">小时</div>
        <div class="border-r" :class="handleDataType == 'day' ? 'timexz' : ''" @click="tabhandle('day')">天</div>
        <div :class="handleDataType == 'month' ? 'timexz' : ''" @click="tabhandle('month')">月</div>
      </div>
    </div>
    <div id="rigthEchart" class="conton"></div>
  </div>
</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
// import baseService from "@/service/baseService";
import * as echarts from "echarts";

export default defineComponent({
  name: "RealTimeTree",
  setup() {
    const state = reactive({
      myChart: null,
      handleDataType: "hour"
    });
    return {...useView(state), ...toRefs(state)};
  },
  mounted() {
    let chartDom = document.getElementById("rigthEchart");
    this.myChart = echarts.init(chartDom);
    this.getInfo();
  },
  methods: {
    tabhandle(data) {
      this.handleDataType = data;
      // this.getInfo();
    },
    // 获取信息
    getInfo() {
      //   baseService.get(`/station/kxstation/getListInfoNew`).then((res) => {
      //     if (res.code !== 0) {
      //       return this.$message.error(res.msg);
      //     }
      //     this.stationData = res.data.list;
      //   });

      // var data = 0.8;
      // let option = {
      //   //backgroundColor: '#000',//背景
      //   title: [
      //     {
      //       text: (data * 100).toFixed(0) + "%",
      //       left: "50%",
      //       top: "40%",
      //       textAlign: "center",
      //       textStyle: {
      //         fontSize: "30",
      //         color: "#5acef2",
      //         textAlign: "center"
      //       }
      //     }
      //   ],
      //   polar: {
      //     radius: ["43%", "40%"], //极坐标系的半径
      //     center: ["50%", "50%"] //极坐标系的中心（圆心）坐标，数组的第一项是横坐标相对于容器宽度，第二项是纵坐标相对于容器高度
      //   },
      //   angleAxis: {
      //     max: 100, //最大值
      //     clockwise: false, //进度按逆时针方向
      //     axisLine: {
      //       show: false
      //     },
      //     axisTick: {
      //       show: false
      //     },
      //     axisLabel: {
      //       show: false
      //     },
      //     splitLine: {
      //       show: false
      //     }
      //   },
      //   radiusAxis: {
      //     type: "category",
      //     axisLine: {
      //       show: false
      //     }
      //   },
      //   series: [
      //     {
      //       type: "liquidFill",
      //       radius: "40%",
      //       z: 1, //组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
      //       center: ["50%", "50%"],
      //       amplitude: 20, //圆形内 水滴角度
      //       color: {
      //         type: "linear",
      //         x: 0,
      //         y: 0,
      //         x2: 1,
      //         y2: 1,
      //         colorStops: [
      //           {
      //             offset: 0,
      //             color: "#e744ff"
      //           },
      //           {
      //             offset: 1,
      //             color: "#33c8ff"
      //           }
      //         ],
      //         globalCoord: false
      //       },
      //       data: [
      //         //0.5,
      //         {
      //           value: 0.44,
      //           direction: "left"
      //         }
      //       ],
      //       backgroundStyle: {
      //         //borderWidth: 1,
      //         color: "transparent"
      //       },
      //       label: {
      //         normal: {
      //           formatter: ""
      //         }
      //       },
      //       outline: {
      //         // 轮廓设置
      //         show: true,
      //         itemStyle: {
      //           borderWidth: 0 //轮廓大小
      //         },
      //         borderDistance: 0 // 轮廓间距
      //       }
      //     },
      //     {
      //       //外层环形
      //       name: "",
      //       type: "bar",
      //       roundCap: true, //是否在环形柱条两侧使用圆弧效果
      //       z: 2,
      //       showBackground: true,
      //       backgroundStyle: {
      //         //环形底色
      //         color: "#cecece"
      //       },
      //       data: [75], //环形进度数据
      //       coordinateSystem: "polar",
      //       itemStyle: {
      //         normal: {
      //           color: new echarts.graphic.LinearGradient(0, 0, 0.5, 1, [
      //             {
      //               offset: 0,
      //               color: "#5acef2"
      //             },
      //             {
      //               offset: 0.7,
      //               color: "#5073fb"
      //             },
      //             {
      //               offset: 1,
      //               color: "#6ae8d8"
      //             }
      //           ])
      //         }
      //       }
      //     }
      //   ]
      // };

      let option = {
        tooltip: {
          formatter: "Group {a}: ({c})",
          align: "center"
        },
        grid: {
          left: "left",
          top: "30",
          bottom: "20",
          // height: "90%",
          containLabel: true,
          borderWidth: 0,
          show: false
        },
        xAxis: {
          axisTick: {
            show: false
          },
          splitLine: {show: false}
        },
        yAxis: {
          axisTick: {
            show: false
          },
          splitLine: {show: false}
        },
        series: [
          {
            symbolSize: 6,
            color: "#12dbf2",
            data: [
              [0, 0],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ],
            type: "scatter"
          }
        ]
      };

      option && this.myChart.setOption(option);
    }
  }
});
</script>

<style lang="scss" scoped>
.border-r {
  border-right: 1px rgba($color: #1e516a, $alpha: 0.7) solid;
}

.timexz {
  color: #022430;
  background-color: #12dbf2;
}

.box-bottom {
  color: #fff;
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow: hidden;
  position: relative;
  flex: 1;

  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time {
      cursor: pointer;
      color: #12dbf2;
      display: flex;
      align-items: center;
      border: 1px rgba($color: #1e516a, $alpha: 0.7) solid;
      font-size: 12px;

      div {
        padding: 1px 8px;
      }
    }
  }

  .conton {
    width: 100%;
    height: 100%;
  }
}
</style>
